<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form>
        <el-form-item>
          <el-button type="success" icon="plus" v-if="hasPerm('devices:add')" @click="showCreate()" >添加设备
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit
              highlight-current-row>
      <el-table-column align="center" label="序号" >
        <template slot-scope="scope">
          <span v-text="getIndex(scope.$index)"> </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="ID" >
        <template slot-scope="scope">
          <div v-for="item in scope" >
            <div v-text="item.idd" ></div>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="名称">
        <template slot-scope="scope">
          <div v-for="item in scope" >
            <div v-text="item.name" ></div>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="管理">
        <template slot-scope="scope">
          <div v-if="scope.row.roleName!='管理员'">
            <el-button type="primary" icon="edit" @click="" v-if="hasPerm('devices:update')">修改
            </el-button>
            <el-button v-if="hasPerm('devices:update')" type="danger"
                       icon="delete"
                       @click="" >
              删除
            </el-button>
          </div>
        </template>

      </el-table-column>
    </el-table>




    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form class="small-space" :model="tempDevice" label-position="left" label-width="100px"
               style='width: 600px; margin-left:50px;'>
        <el-form-item label="设备名称">
          <el-input type="text" v-model="tempDevice.devicesName" style="width: 250px;">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button v-if="dialogStatus=='add'" type="success" @click="createDevices()">创 建</el-button>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>






  </div>
</template>
<script>
  export default {
    data() {
      return {
        list: [],//表格的数据
        listQuery: {// 分页相关
          pageNum: 3,//页码
          pageRow: 15,//每页条数
          name: ''
        },
        allPermission: [],
        listLoading: false,//数据加载等待动画
        dialogFormVisible: false,//增加按钮弹窗能不能看到
        adminName: '管理员' ,
        dialogStatus: 'add',
        textMap: {
          update: '编辑',
          add: '增加设备'
        },
        tempDevice:{
          devicesName:''
        }
      }
    },
    created() {//钩子函数创建时调用
      this.getList();
      this.getAllPermisson();
    },
    methods: {
      getAllPermisson() {
        //查询所有权限
        //是否拥有某项权限使用如 v-if="hasPerm('devices:update')"
        this.api({
          url: "/user/listAllPermission",
          method: "get"
        }).then(data => {
          this.allPermission = data.list;
        })
      },
      getList() {
        //查询列表
        this.listLoading = true;
        this.api({
          url: "/devices/listDevices",
          method: "get",
          params: this.listQuery//分页相关
        }).then(data => {
          this.listLoading = false;
          this.list = data.list;
          console.log(data);
        })
      },
      showCreate() {
        this.tempDevice.devicesName='';
        this.dialogStatus = "add";
        //显示新增对话框
        this.dialogFormVisible = true;//显示弹窗
      },   
      createDevices(){
        console.log(this.tempDevice);
        this.api({
          url: "/devices/addDevices",
          method: "post",
          data: this.tempDevice
        }).then(() => {
          this.getList();
          this.dialogFormVisible = false;
        })
      },   
      getIndex($index) {
        //表格序号
        return $index + 1
      }
    }
  }
</script>
<style scoped>
  .requiredPerm {
    color: #ff0e13;
  }
</style>
